<script setup lang="ts">
import wx from 'weixin-js-sdk'
import { paySupplementaryAPI } from '@/apis/paySupplementary'
import { supplementaryPaymentAPI } from '@/apis/supplementaryPayment'
import { useGeneralConfigStore } from '@/store/generalConfig'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const id = ref('')
const count = ref(1)

const finalMoney = computed(() => {
  return (Number(generalConfigStore.generalConfig?.patch_money) * count.value).toString()
})

onLoad((options) => {
  if (!options?.id) {
    uni.showToast({ title: '获取数据失败', icon: 'none' })
    return
  }
  id.value = options.id
})

const handleSubmit = useThrottleFn(async () => {
  const res = await supplementaryPaymentAPI({
    id: id.value,
    money: finalMoney.value,
  }, userInfoStore.userInfo!.token!)
  if (res.data?.code !== 1)
    return
  const payRes = await paySupplementaryAPI({
    id: res.data.data,
  }, userInfoStore.userInfo!.token!)
  if (payRes.data?.code !== 1)
    return
  WeixinJSBridge.invoke('getBrandWCPayRequest', {
    appId: payRes.data.data.appId,
    timeStamp: payRes.data.data.timeStamp,
    nonceStr: payRes.data.data.nonceStr,
    package: payRes.data.data.package,
    signType: payRes.data.data.signType,
    paySign: payRes.data.data.paySign,
  }, (res: any) => {
    if (res.err_msg === 'get_brand_wcpay_request:ok') {
      router.replace({
        name: 'intercityOrderDetail',
        params: { id: id.value },
      })
    }
    else { uni.showToast({ title: '支付失败', icon: 'none' }) }
  })
}, 1000)
</script>

<template>
  <Spacer height="30" />
  <view class="px-24rpx">
    <view class="flex rounded-20rpx bg-white p-30rpx">
      <image
        class="h-160rpx w-160rpx flex-shrink-0 rounded-20rpx bg-gray-100"
      />
      <Spacer width="20" class="flex-shrink-0" />
      <view class="flex flex-col justify-between">
        <view class="line-clamp-2 text-28rpx leading-40rpx">
          这里是捎件大件补款专用商品这里是捎件大件补款专用商品
        </view>
        <view class="flex items-center justify-between">
          <view class="text-34rpx text-#F53B25 font-bold leading-40rpx">
            ¥{{ generalConfigStore.generalConfig?.patch_money || '0' }}
          </view>
          <uv-number-box bg-color="rgba(0, 0, 0, 0)" @change="(e: any) => count = Number(e.value)">
            <template #minus>
              <view class="h-42rpx w-42rpx flex items-center justify-center rounded-10rpx text-28rpx" :class="count <= 1 ? 'bg-#F0F0F0 text-#999999' : 'bg-#3F8BF6 text-white'">
                -
              </view>
            </template>
            <template #plus>
              <view class="h-42rpx w-42rpx flex items-center justify-center rounded-10rpx bg-#3F8BF6 text-28rpx text-white">
                +
              </view>
            </template>
          </uv-number-box>
        </view>
      </view>
    </view>
  </view>
  <view class="fixed bottom-0 w-full flex items-center justify-between bg-#FFFFFF px-24rpx py-16rpx x-center">
    <view class="flex items-center">
      <image
        class="h-30rpx w-30rpx"
        src="@/static/images/warning_orange_circle.png"
      />
      <Spacer width="8" />
      <view class="text-33rpx text-#333333">
        总计:
        <text class="text-#F53B25 font-bold">
          ¥{{ finalMoney }}
        </text>
      </view>
    </view>
    <RGButton size="large" corner="large" :width="460" @tap="handleSubmit">
      立即支付
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'supplementaryPayment'
style:
  navigationBarTitleText: '捎件补款'
</route>
